<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-if="RevampModalObj.isShow">
      <div class="modal-ctrl-main map-ctrl">
        <div class="modal-title">
          <p>修改辖区信息</p>
        </div>
        <div class="modal-ctrl-content clear-false">

          <div class="map-body f-l">
            <popedom
              ref="pointMapRef"
              :actionType=actionType
              :ringsStr=ringsStr
              @polygonGraphic="polygonGraphic"
              @removeAll="removeAllFn"
            ></popedom>
          </div>
          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                辖区名称：
              </div>
              <input type="text" v-model="AddData.NAME" class="modal-text f-l" maxlength="30">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l ">
                所属单位：
              </div>
              <input type="text" v-model="stationName" readonly="readonly" @click="getStationTree" class="modal-text f-l" >
              <input type="hidden" v-model="AddData.STATION_ID">
              <!--{{sectionTreeIShow}}-->
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionTree" class="ztree sectionTree-box"></div>
              </div>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l ">
                地址：
              </div>
              <input type="text" v-model="AddData.ADDRESS" class="modal-text f-l" maxlength="30">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l ">
                面积：
              </div>
              <input type="text" v-model="AddData.MEASURE" class="modal-text f-l" maxlength="30">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l ">
                邮政编码：
              </div>
              <input type="text" v-model="AddData.POSTAL_CODE" class="modal-text f-l" maxlength="30">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l ">
                户籍人口：
              </div>
              <input type="text" v-model="AddData.POPULATION" class="modal-text f-l" maxlength="30">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l ">
                备注：
              </div>
             <!-- <input type="text" v-model="AddData.COMMENTS" class="modal-text f-l" maxlength="30">-->
              <textarea v-model="AddData.COMMENTS" maxlength="100" class="modal-text f-l"></textarea>
            </div>

          </div>
          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    import popedom from "../../map/popedom/popedom"
    export default {
        name: "RevampAreaModal",
        props:["RevampModalObj","selectRowId"],
        data(){
          return{
            AddData:{
              NAME:"",//名称
              ADDRESS:"",//地址
              MEASURE:"",//面积
              POSTAL_CODE:"",//邮政编码
              POPULATION:"",//户籍人口
              STATION_ID:"",//所属单位
              CREATE_TIME:"",//创建时间
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
              CONTROL_CIRCLE:"",//管辖范围
            },
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            sectionTreeIShow:false,
            stationName:"",
            iconLis:[],
            selectObj:{
              bigSelect:false,
              smallSelect:false,
            },
            point:[114.21868761726246, 30.584733852070247],
            actionType:'',
            ringsStr: "",
            graphicAry:[],
            mapCodeArr:[],
            areaList:[],
            stationNodeTree:[],
            openMapDataContentIsShow :false
          }
        },
        components:{
          popedom
        },
        watch:{
          RevampModalObj:{
            handler(v1){
              if( v1.isShow ){
                this.getAreaData();
                this.openMapDataContent();
              }
            },
            deep:true
          }
        },
        methods:{
          getAreaData(){

            let params =  {
              "columns": ["*"],
              "conditions": [
                {
                  "field": "ID",
                  "symbol": "=",
                  "value": this.selectRowId
                }
              ],
              "dataTypeCode": "userprofile",
              "pageSize": -1,
              "tableName": "T_JURISDICTIONAL_AREA"
            };
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then(res=>{
                //console.log(res);
                let successData = res.data.data.list[0];
                for ( let successKey in successData ){
                  for( let AddDataKey in this.AddData ){
                    if( successKey === AddDataKey ){
                      this.AddData[AddDataKey] = successData[successKey]
                    }
                  }
                }
                this.ringsStr = this.AddData.CONTROL_CIRCLE;
                this.graphicAry = JSON.parse(this.AddData.CONTROL_CIRCLE);
                this.AddData.CONTROL_CIRCLE = JSON.parse(this.AddData.CONTROL_CIRCLE);
                this.actionType="edit";
                for( let i=0;i<this.stationNodeTree.length;i++ ){
                  if( this.stationNodeTree[i].id === successData.STATION_ID ){
                    this.stationName = this.stationNodeTree[i].name;
                  }
                }
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //提交
          subBtn(){
            this.AddData.CREATE_USER = this.isLogin().userId;
            //console.log(this.AddData);
            this.AddData.NAME = this.JPtool.subBlank(this.AddData.NAME);
            if( this.verifyForm.isNull(this.AddData.NAME) ){
              this.s_alert("名称不能为空！");
              return false;
            }else if( this.verifyForm.isNumber(this.AddData.POSTAL_CODE) ){
              this.s_alert("邮政编码只能为数字！");
              return false;
            }else if( this.verifyForm.isNumber(this.AddData.POPULATION) ){
              this.s_alert("户籍人口只能为整数！");
              return false;
            }

            if( this.graphicAry.length > 0 ){
              let self = this;
              subMap(0);
              //新增地图 防控圈
              function subMap(i){
                self.$axios({
                  method: 'post',
                  async:false,
                  url: mapFeatureServer + '2/addFeatures', // 1 线 2 圈
                  data: 'f=json&features='+JSON.stringify([ {"geometry":self.graphicAry[i].geometry,"attributes":{"name":""}} ]),
                  headers: {"Content-Type": "application/x-www-form-urlencoded"}
                }).then( res => {
                  //console.log(res);
                  //this.AddData.MAP_CODE = res.data.addResults[0].objectId;
                  //console.log(i);
                  //console.log(res.data.addResults[0].objectId);
                  //console.log(self.AddData.CONTROL_CIRCLE);

                  self.AddData.CONTROL_CIRCLE[i]["mapCode"] = res.data.addResults[0].objectId;
                  i = i + 1;
                  if(i < self.AddData.CONTROL_CIRCLE.length){
                    subMap(i);
                  }else{
                    //console.log(self.AddData.CONTROL_CIRCLE);
                    self.subArea()
                  }

                }).catch( err=>{
                  //console.log(err);
                } )
              }
            }else{
              this.s_alert("至少在地图上画一个区域！");
              return false;
            }

          },
          //获取部门树
          getStationTree(){
            this.sectionTreeIShow = !this.sectionTreeIShow;
            if( this.sectionTreeIShow ){
             // this.getStationTreeFn();
              $.fn.zTree.init($("#sectionTree"), this.setting, this.stationNodeTree);
            }
          },
          getStationTreeFn(){
            this.$axios.get(this.HOST+'/station/getOrgaInfo')
              .then((data)=>{
                this.stationNodeTree = data.data.data;
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //新增提交
          subArea(){
            this.AddData.CONTROL_CIRCLE = JSON.stringify(this.AddData.CONTROL_CIRCLE);
            let params = {
              "columns": [
                "*"
              ],
              "conditions": [
                {
                  "field": "ID",
                  "symbol": "=",
                  "value": this.selectRowId
                }
              ],
              "data": this.AddData,
              "dataTypeCode": "userprofile",
              "tableName": "T_JURISDICTIONAL_AREA"
            };
            this.AddData.CREATE_TIME = "";
            //console.log(params);
            this.$axios({
              method: 'put',
              async:false,
              url:this.HOST+'/base/modify',
              data:params
            })
              .then((data)=>{
                //console.log(data);
                if( data.data.success ){
                  this.s_alert("修改成功！");
                  this.s_logwrite("点位信息管理-辖区管理","修改辖区");
                  this.close();
                }
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //获取所属地区
          getAreaList(){
            //POST /dictionary/{key}
            this.$axios.post(this.HOST+"/dictionary/area")
              .then(res=>{
                //console.log(res);
                this.areaList = res.data;

              })
              .catch(err=>{
                //console.log(err);
              })
          },
          polygonGraphic(graphic){
            let polygonData = {
              rings : graphic.geometry.rings,
              geometry: graphic.geometry,
              mapCode:""
            };
            this.graphicAry.push(polygonData) ;
            this.AddData.CONTROL_CIRCLE = this.graphicAry;
          },
          //清空所有地图信息
          removeAllFn(){
            this.graphicAry = [];
            this.AddData.CONTROL_CIRCLE = "";
            this.actionType="";
          },
          //关闭弹出
          close(){
            this.$emit("closeRevampModal");
            this.clearData();
            this.removeAllFn();
          },
          //清除缓存
          clearData(){
            this.AddData={
              NAME:"",//名称
              ADDRESS:"",//地址
              MEASURE:"",//面积
              POSTAL_CODE:"",//邮政编码
              POPULATION:"",//户籍人口
              STATION_ID:"",//所属单位
              CREATE_TIME:"",//创建时间
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
              CONTROL_CIRCLE:"",//管辖范围
            };
            this.stationName = "";
            this.openMapDataContentIsShow = false;
            this.sectionTreeIShow = false;
          },
          //展开地图数据录入界面
          openMapDataContent(){
            this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
          }
        },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.stationName = treeNode.name;
              _this.AddData.STATION_ID = treeNode.id;
              _this.sectionTreeIShow = false;
            }
          };
          this.getStationTreeFn();
        },
    }
</script>

<style scoped>
  .sectionTree-box{
    position: absolute;
    z-index: 99;
    padding: 5px;
    right: 0;
    width: 60%;
    top: 30px;
    height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(51,51,51,0.2);
  }
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .modal-ctrl-body .modal-ctrl-main.map-ctrl .map-body .import-point-body .point-list-body{
    height: 130px;
  }
</style>
